import { EditorProvider, useCurrentEditor } from "@tiptap/react";
import { Document } from "../extensions/Document";
import { Text } from "../extensions/Text";
import { Paragraph } from "../extensions/Paragraph";
import { Bold } from "../extensions/Bold";
import Italic from "@tiptap/extension-italic";
import { Code } from "../extensions/Code";
import TagExtension from "../extensions/TagExtension";

const Toolbar = () => {
  const { editor } = useCurrentEditor();
  if (!editor) return null;

  const bold = () => { 
    editor.chain().focus().toggleBold().run();
  };
  const italic = () => {
    editor.chain().focus().toggleItalic().run();
  };
  return (
    <div>
      <button onClick={bold}>加粗</button>
      <button onClick={italic}>斜体</button>
    </div>
  );
};

export function Editor() {
  const content = "<p>您好, <strong>Hello,</strong> <em>world</em></p><pre>console.log('Hello, world!!!');</pre><react-component></react-component>";
  // const content = {
  //   type: "doc",
  //   content: [
  //     {
  //       type: "paragraph",
  //       content: [
  //         {
  //           type: "text",
  //           text: "您好,",
  //         },
  //         {
  //           type: "text",
  //           text: "Hello,",
  //           marks: [{ type: "bold" }],
  //         },
  //         {
  //           type: "text",
  //           text: " world",
  //           marks: [{ type: "italic" }],
  //         },
  //       ],
  //     },
  //     {
  //       type: "code",
  //       content: [
  //         {
  //           type: "text",
  //           text: "console.log('Hello, world!');",
  //         }
  //       ]
  //     }
  //   ],
  // };
  return (
    <EditorProvider
      content={content}
      extensions={[Document, Text, Paragraph, Bold, Italic, Code, TagExtension]}
    >
      <Toolbar />
    </EditorProvider>
  );
}
